<template>
	<view class="box">
		<u-loading-page :loading="show" bgColor="#ffffff94;" loadingColor="#3996e6;" color="#3996e6;"
			loadingText="登录中......" fontSize="30rpx"></u-loading-page>
		<view class="topTit">
			<image src="https://www.tdtye.com/files/vegetable_mall_file/images/mine/login.png" mode=""></image>
		</view>
		<view class="boxCont">
			<view class="ipt">

				<uni-easyinput type="number" class="inputTit" v-model="form.account" :inputBorder="false"
					placeholder="请输入手机号" @blur="blur(form.account)"></uni-easyinput>
			</view>
			<view class="ipt">
				<uni-easyinput type="password" class="inputTit" v-model="form.password" :inputBorder="false"
					placeholder="请输入密码"></uni-easyinput>
			</view>
			<view class="ipt">
				<uni-easyinput type="number" class="inputTit" v-model="form.verifyCode" :inputBorder="false"
					placeholder="请输入验证码" @confirm="sub"></uni-easyinput>
				<!-- <view class="imgCode"> -->
				<ImgCode ref="imgCode" :sign.sync="form.verifySign" style="margin-left: 10px;" />
				<!-- </view> -->
			</view>
			<!-- <view class="forget">
				<text @click="jump('./forgetPass')">忘记密码?</text>
			</view> -->
			<button type="default" class="btn themeBackColor" @click="sub" :disabled="disabled">登 录</button>

			<view class="bottomTit" @click="jump('./merchantsBack')">电脑版商家后台</view>
		</view>

	</view>
</template>

<script>
	import ImgCode from '@/common/ImgCode'
	import rsa from '@/utils/rsa.js'
	export default {
		components: {
			ImgCode
		},
		data() {
			return {
				show: false,
				imgApi: "",
				loading: true,
				form: {
					account: '',
					password: '',
					verifyCode: '', // 验证码
					verifySign: '',
				},
				color: '#5aa5e3',
				disabled: false,
			}
		},
		watch: {
			form: {
				handler(newName, oldName) {
					if (this.form.account && this.form.password && this.form.verifyCode) {
						this.disabled = false
					} else {
						this.disabled = true
					}
				},
				immediate: true,
				deep: true
			}
		},
		onLoad() {
			this.loading = false
			this.getAccount()
			let {
				phone
			} = uni.getStorageSync("merchantsToken")
			this.form.account = phone
		},
		methods: {
			getAccount() {
				this.$axios({
					method: "POST",
					url: "user/info/selectAccount",
					data: this.form
				}).then((res) => {
					if (res.code == 0) {
						if (res.result != "") {
							this.form.account = res.result
						}
					}
				})
			},
			// 检测手机号格式
			blur(phone) {
				this.$comm.blur1(phone)
			},
			getBase(data) {
				console.log("getBase", data)
			},
			imgCodeShow(data) {

			},
			sub() {
				this.show = true
				let password = this.form.password
				let account = this.form.account
				let code = this.$refs.imgCode.getImgCode();
				this.form.password = rsa.encryptByPublicKey(this.form.password)
				this.form.account = rsa.encryptByPublicKey(this.form.account)
				this.$axios({
					method: "POST",
					url: "merchant/public/authority",
					data: this.form
				}).then((res) => {
					if (res.code == 0) {
						uni.setStorageSync('merchantsToken', {
							token: res.result.token,
							phone: account
						});
						uni.setStorageSync("merchantMenu", res.result.menuList)
						if (res.result.storeAvatar) {
							uni.setStorageSync("storeAvatar", res.result.storeAvatar)
							uni.setStorageSync("storeName", res.result.storeName)
						}
						uni.redirectTo({
							url: "./merchantsDetail",
							complete: () => {
								this.show = false
							}
						})
					} else {
						uni.showToast({
							title: res.result,
							duration: 2000,
							icon: "none"
						});
						this.show = false
					}
				})

				this.form = {
					account,
					password,
					verifyCode: '', // 验证码
					verifySign: ''
				};
			},
			// 跳转页
			jump(url) {
				this.$comm.goPage(url)
			},
		}
	}
</script>

<style scoped lang="scss">
	.themeBackColor {
		background-color: #3994ff !important;
		color: #fff !important;
	}

	.iconfont {
		font-size: 40rpx;
	}

	.box {
		height: 100vh;
		background-color: #fff;
	}

	.boxCont {
		padding: 0 40rpx;

		.bottomTit {
			text-align: center;
			color: #3994ff;
			margin-top: 30rpx;
			font-size: 28rpx;
		}
	}

	.topTit {
		width: 100%;

		image {
			width: 100%;
		}
	}

	.ipt {
		display: flex;
		align-items: center;
		margin: 30rpx 0;
		background-color: #f5f5f5;
		border-radius: 100rpx;
		height: 90rpx;
		padding: 0 40rpx 0 25rpx;
	}

	.ipt .inputTit {
		width: 100%;
	}

	.btn {
		margin-top: 70rpx;
		border-radius: 100rpx;
		border: 2rpx solid #5aa5e3;
	}

	.disable {
		background-color: #f4f4f4;
		color: #a5a5a5;
	}

	.forget {
		text-align: right;
		color: #5aa5e3;
		margin-top: 20rpx;
	}
</style>
